import Vue from 'vue'
import VueRouter from 'vue-router'

// 1 定义（导入）路由组件 
import Home from '../view/Home.vue'
import User from '../view/User.vue'
import Main from '../view/Main.vue'
import Mall from '../view/Mall.vue'
import PageOne from '../view/PageOne.vue'
import PageTwo from '../view/PageTwo.vue'

import Login from '../view/Login.vue'


// 0 导入和调用
Vue.use(VueRouter)

// 2 定义路由（映射）
// const routes = [
//     { path: '/home', component: Home },
//     { path: '/user', component: User }
//   ]

const routes = [
    // 主路由  http://localhost:8080/#/home
    { 
        path: '/',
        component: Main,
        redirect: '/home',  // 重定向
        name: 'Main',
        children: [ 
            // 子路由
            { path: 'home', name: 'home', component: Home },    // 首页
            { path: 'user', name: 'user', component: User },    // 用户管理
            { path: 'mall', name: 'mall', component: Mall },    // 商品管理
            { path: 'page1', name: 'page1', component: PageOne },   // 页面1
            { path: 'page2', name: 'page2', component: PageTwo }    // 页面2
        ]
    },
    // http://localhost:8080/#/login
    {
        path: '/login',
        name: 'login',
        component: Login

    }
]

// 3 创建 router 实例 并提供出去
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })
export default router

// 4 挂载根实例 

// 5 路由出口
